<script lang="ts" setup>
import { ref } from 'vue'

const isShow = ref(false)

const toggleShow = () => {
  isShow.value = !isShow.value
}

</script>

<template>
  <button @click="toggleShow">开关按钮</button>
  <!-- v-show 控制的标签 还会保存在页面 没有被删除 只是被隐藏了
   通过 style= "display: none" 不可见 不占位 -->
  <div class="box" v-show="isShow">
    我是通过 v-show 条件渲染的盒子
  </div>
  <!-- v-if 控制的标签 不满足条件 不会创建 和 if 条件渲染一样-->
  <div class="box" v-if="isShow">
    我是通过 v-if 条件渲染的盒子
  </div>
</template>

<style>
.box {
  color: #000;
  width: 200px;
  height: 200px;
  background-color: #ccc;
  margin: 20px;
}
</style>
